<!-- 所有小组 -->
<template>
  <div class="all-group">
    <el-card shadow="hover" :body-style="	{ padding: '0px' }">
      <div class="title">
        <span>按条件检索小组</span>
      </div>
      <div class="tabs">
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >{{tag}}</el-tag>
      </div>
      <div class="items">
          <span>按地区筛选：</span>
          <a href="#" v-for="tab in placeTabs" :key="tab" ref="tabed" value="tab" @click.prevent="addTag(tab)">{{tab}}</a><br>
          <span>按标签筛选：</span>
          <a href="#" v-for="tab in classTabs" :key="tab" ref="tabed" value="tab" @click.prevent="addTag(tab)">{{tab}}</a>
      </div>
    </el-card>
    <div class="group-cards">
      <div class="row" v-for="rows in 5" :key="rows">
        <div class="group" v-for="col in 3" :key="col">
          <el-card shadow="hover" :body-style="	{ padding: '10px' }"  >
            <img src="@/images/icon.jpg" alt="" width="80px" @click.prevent="groupinto">
            <div class="right">

            <span id="gtitle">广州摄影群</span>
            <span id="gnum">112位成员</span><br>
            <span id="gcon">爱好人像摄影</span>
            </div>
          </el-card>
        </div>
      </div>
       <div class="fenye" style="text-align:center;margin:80px auto;">
        <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicTags: [],
      placeTabs:["广东","广西","福建"],
      classTabs:["人像","人文","自然","旅拍","静物"],
      inputVisible: false,
      inputValue: ""
    };
  },

  methods: {
    addTag(item){
      console.log(item)
      this.dynamicTags.push(item);
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    groupinto(){
      this.$router.push('oneGroup')
    }
  }
};
</script>
<style lang='scss' scoped>
.all-group {
  margin-bottom: 100px;
  .title {
    height: 50px;
    padding: 15px 20px;
    background-color: #f5f5f5;
    span {
      font-size: 16px;
      letter-spacing: 3px;
      font-family: auto;
      font-weight: bold;
    }
  }
  .tabs {
    padding: 5px 20px;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
  .items{
      padding: 15px 20px;
          span {
      font-size: 16px;
      letter-spacing: 3px;
      font-family: auto;
      font-weight: bold;
      line-height: 30px;
    }
    a{
      padding:0 10px;
   
    }
  }
  .group-cards{
    margin:50px 0;
    .row{
      display:flex;
      justify-content: space-between;
      width:100%;
      height: 100px;
      margin:40px 0;
      .group{
        width:30%;
        height:110px;
           border: 1px solid #303133;
        .right{
              display: inline-block;
    position: absolute;
    margin-top: 15px;
    margin-left: 20px;
    #gtitle{

    }
    #gnum{
      margin-left:30px;
    }
    #gcon{
      line-height: 50px;
    }
        }
      }
    
    }
  }
}
</style>